<!DOCTYPE html>
<html lang="en">
<head>
  <title>{{userName}}/{{projectName}} - {{$config.name}} - {{$config.description}}</title>
  <t-include file="include/assets.html"/>
  <script src="/static/lib/timeago.js/timeago.min.js"></script>
  <t-if on="/^\.(md|markdown|txt|text)$/i.test(ext)">
    <script src="/static/lib/highlightjs/js/highlight.pack.min.js"></script>
    <script src="/static/lib/marked/marked.min.js"></script>
    <link href="/static/lib/highlightjs/styles/solarized-light.min.css" rel="stylesheet">
  </t-if>
  <t-elif on="/^\.pdf$/i.test(ext)">
    <script src="/static/lib/pdfobject/pdfobject.min.js"></script>
  </t-elif>
  <link rel="stylesheet" type="text/css" href="/static/styles/markdown.css"/>
  <link rel="stylesheet" type="text/css" href="/static/styles/file.css"/>
</head>
<body>
<!--<div class="{{isReadme ? 'container' : 'container'}}">-->
<div class="container">
  <t-include file="include/header.html"/>
  <nav aria-label="breadcrumb" class="position-relative">
    <ol class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="/">
          <i class="fa fa-home"></i>
        </a>
      </li>
      <li class="breadcrumb-item">
        <a href="/projects/">项目</a>
      </li>
      <li class="breadcrumb-item">
        <a href="/projects/{{userName}}/">{{userName}}</a>
      </li>
      <li class="breadcrumb-item active" aria-current="page">{{projectName}}</li>
      <li class="breadcrumb-item">
        {{decodeURI(file).split('/').pop()}}
      </li>
    </ol>
    <div class="position-absolute" style="right: 10px;top: 12px;">
      <a href="{{editUrl}}" target="_blank" class="mr-2">
        <i class="fa fa-edit"></i>
        <span>编辑</span>
      </a>
      <a href="/raw/{{userName}}/{{projectName}}/{{decodeURI(file)}}?download" target="_blank">
        <i class="fa fa-download"></i>
        <span>下载</span>
      </a>
    </div>
  </nav>
  <div class="mb-2">
    <div class="float-left">
      <span>
        <i class="fa fa-book"></i>
        <span>{{$project.repository.description}}</span>
      </span>
    </div>
    <div class="float-right">
      <t-if on="isReadme">
        <span class="badge badge-light">
          <img src="{{$project.pusher.avatar_url}}" alt="{{$project.pusher.username}}" width="20"/>
          <span>{{$project.pusher.full_name}}</span>
          <span>更新于</span>
          <span datetime="{{$project.repository.updated_at}}"></span>
        </span>
      </t-if>
      <t-else>
        <span class="badge badge-light">
          <span id="update-user">{{$project.pusher.full_name}}</span>
          <span>更新于</span>
          <span id="update-date" datetime="{{$project.repository.updated_at}}"></span>
        </span>
      </t-else>
    </div>
    <span class="clearfix"></span>
  </div>
  <hr>
  <div id="container">
    <t-if on="!isReadme">
      <div id="sidebar">
        <ul id="catalog">
          <t-tree on="catalog as item">
            <li>
              <div class="item-content d-inline-block {{item.type !== 'dir' ? 'is-file' : ''}}">
                <t-if on="item.type === 'dir'">
                  <i class="fa fa-folder-o"></i>
                  <span class="text-wrap">{{item.name}}</span>
                </t-if>
                <t-else>
                  <t-if on="/^\.(md|markdown)$/i.test(item.ext)">
                    <i class="fa fa-file-code-o"></i>
                  </t-if>
                  <t-elif on="/^\.docx$/i.test(item.ext)">
                    <i class="fa fa-file-word-o"></i>
                  </t-elif>
                  <t-elif on="/^\.pdf$/i.test(item.ext)">
                    <i class="fa fa-file-pdf-o"></i>
                  </t-elif>
                  <t-else>
                    <i class="fa fa-file-text-o"></i>
                  </t-else>
                  <a href="/projects/{{userName}}/{{projectName}}/{{item.file}}" class="text-wrap">
                    {{item.name}}
                  </a>
                  <div class="data-msg">
                    <span data-user="{{item.meta.user}}"></span>
                    <span data-date datetime="{{item.meta.date}}"
                          class="badge badge-light"
                    ></span>
                    <span title="{{item.meta.message}}">{{item.meta.message}}</span>
                  </div>
                </t-else>
              </div>
              <t-if on="item.children">
                <ul>
                  <t-children/>
                </ul>
              </t-if>
            </li>
          </t-tree>
        </ul>
      </div>
    </t-if>
    <div id="content"></div>
  </div>
  <t-include file="./include/footer.html"/>
</div>
<div class="position-fixed" id="tool-buttons">
  <a class="btn btn-sm btn-dark text-light" href="#" title="回到顶部" id="tool-btn-top">
    <i class="fa fa-arrow-up"></i>
  </a>
  <a class="btn btn-sm btn-dark text-light" title="专注模式" id="tool-btn-focus">
    <i class="fa fa-dot-circle-o"></i>
  </a>
</div>
<script>
(function () {
  var container = $('body>.container:first')
  $('#tool-btn-focus').click(function () {
    container.toggleClass('mode-focus')
  })
})()
</script>
<t-if on="!/^\.pdf$/i.test(ext)">
  <script src="/static/scripts/file.js"></script>
  <script type="text/javascript">
  $(function () {
    loadFile('/raw/{{userName}}/{{projectName}}/{{file}}', '{{file}}')
  })
  </script>
</t-if>
<t-elif on="/^\.pdf$/i.test(ext)">
  <script type="text/javascript">
  $(function () {
    PDFObject.embed('/raw/{{userName}}/{{projectName}}/{{file}}', '#content', {
      fallbackLink: `<p>你用的古董浏览器不支持PDF文件预览，<a href="[url]" target="_blank">下载</a> 后重来。</p>`
    })
  })
  </script>
</t-elif>
<script>
highlightCurrentFile('{{editUrl}}')
highlightLastUpdatedFile()
$('#sidebar').css('height', window.innerHeight + 'px')
</script>
</body>
</html>
